<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div元素的妙用</title>
	</head>
	<style>
		.circle {
		  width: 100px;
		  height: 100px;
		  border-radius: 50%;
		  outline: 1px solid green;
		}
		
		.triangle {
		  width: 0; /* 设置宽度为0，以便创建三角形 */
		  height: 0; /* 设置高度为0，以便创建三角形 */
		  /* solid表示边框的样式为实线，即边框以连续的实线样式呈现。  transparent表示边框的颜色为透明，即边框没有可见的颜色，会透视显示背景或其它元素。 */
		  border-left: 50px solid transparent; /* 左侧边框为50像素的透明色边框 */
		  border-right: 50px solid transparent; /* 右侧边框为50像素的透明色边框 */
		  border-bottom: 100px solid red; /* 底部边框为100像素的红色边框 */
		}
	</style>
	<body>
		<div style="display: flex;">
			
			<div class="circle">
			</div>
			
			<div class="triangle"></div>
		</div>
	</body>
</html>